{# 继承注册页面父模板 #}
{% extends 'register/base_register.html' %}
{% load static %}

{% block title %}
    管理员注册 - 校园场所集中预约系统
{% endblock %}

{% block user %}
    管理员注册
{% endblock %}

{% block form %}
    <form id="form" action="{% url 'supervisor:register' %}" method="post">
        {% csrf_token %}
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" class="form-control form-control-xl" name="admin_name" placeholder="输入姓名">
            <div class="form-control-icon"><i class="bi bi-person"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="admin_num" type="text" class="form-control form-control-xl" name="admin_num" placeholder="职工号">
            <div class="form-control-icon"><i class="bi bi-envelope"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="password" type="password" class="form-control form-control-xl" name="password" placeholder="输入密码">
            <div class="form-control-icon"><i class="bi bi-shield-lock"></i></div>
        </div>
        <div class="form-group position-relative has-icon-left mb-4">
            <input id="confirm_pwd" type="password" class="form-control form-control-xl" name="confirm_pwd" placeholder="再次输入密码">
            <div class="form-control-icon"><i class="bi bi-shield-lock"></i></div>
        </div>
        <select class="form-select" id="basicSelect" name="gender">
            <option selected="selected">男</option>
            <option>女</option>
        </select>
        <br>
        <select class="form-select" id="basicSelect" name="authority">
            <option selected="selected" value="True" >管理员</option>
        </select>
        <br>
        <br>
        <div class="form-group position-relative has-icon-left mb-4">
            <input type="text" style="width: 50%;display: inline-block"  class="form-control form-control-xl" id="captcha" name="captcha" placeholder="请输入验证码">
            <a href="#" onclick="refreshCaptcha()">
                <img src="{% url 'supervisor:generate_code' %}" alt="验证码" class="bsa-cursor-pointer" id="captcha-image"/>
            </a>
        </div>
        <div id="error-container"></div>
        <button class="btn btn-primary btn-block btn-lg shadow-lg mt-5" type="submit">注册</button>
    </form>
{% endblock %}


{# 若存在账号直接跳转去登录页面 #}
{% block jump %}
<p class='text-gray-600'>已拥有账户？<a href="{% url 'supervisor:login' %}" class="font-bold">登录</a></p>
{% endblock %}

{% block formvalidation %}
<script>
    // 前端表单验证
    $('#form').formValidation({
        err: {
          clazz: 'invalid-feedback',
          container: '#error-container',
          parent: '#form',
        },
        fields: {
            admin_num: {
                validators: {
                    notEmpty: {
                        message:"账号不能为空",
                    },
                    remote: {
                        type: 'post',
                        url: '{% url 'supervisor:register_check_number' %}',  // 表单提交的位置
                        headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "管理员已存在！",
                        delay: 1000
                    },
                    regexp: {
                        regexp: /.*[a-zA-Z].*/,
                        message: '职工号必须包含至少一个字母'
                    },
                },
            },
            password:{
                validators:{
                    notEmpty:{
                        message:"密码不能为空"
                    },
                    callback:{
                        message:"密码输入错误",
                        callback:function(value,validator,$field){
                        if(value === ''){
                            return true;
                        }

                        if(value.length < 8 || value.length > 15){
                            return {
                                valid:false,
                                message:"密码长度不能小于8位或大于15位"
                            };
                        }

                        if (value === value.toLowerCase()) {
                            return {
                                valid: false,
                                message: '密码至少包含一个大写字母'
                            }
                        }

                        if (value === value.toUpperCase()) {
                            return {
                                valid: false,
                                message: '密码至少包含一个小写字母'
                            }
                        }

                        if (value.search(/[0-9]/) < 0) {
                            return {
                                valid: false,
                                message: '它必须至少包含一个数字'
                            }
                        }
                    return true;
                }
                    }
                }
            },
            confirm_pwd: {
                validators: {
                    identical: {
                        field: 'password',
                        message: '和密码不一致'
                    }
                }
            },
            captcha: {
                validators: {
                    notEmpty: true,
                    remote: {
                        type: 'post',
                        url: '{% url 'supervisor:verify_code' %}',
                        headers:{'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val() },  // 注意放到引号里面
                        data: {
                            type: 'save',
                        },
                        //请求失败的消息
                        message: "系统繁忙,请稍后再试",
                        delay: 1000
                    }
                }
            },
        }
    }).on('success.form.fv', function (e) {
        //阻止表单提交
        e.preventDefault();
        //得到表单对象
        var $form = $(e.target);
        let data = $form.serialize();
        //得到序列化数据
        $.ajax({
            url: "{% url 'supervisor:register' %}",
            method: 'post',
            headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val()},  // 注意放到引号里面
            data: data,
        }).then(function (res) {
            if (res.code === 200) {
                // 注册成功
                alert('注册成功');
                // 注册成功后跳转到登录页面
                window.location.href="{% url 'supervisor:login' %}";
            } else {
                // 注册失败
                alert('注册失败');
                // 注册失败重新注册
                window.location.href="{% url 'supervisor:register' %}";
            }
        });
    });
</script>
{# 刷新验证码 #}
<script>
function refreshCaptcha() {
  $.get("{% url 'supervisor:generate_code' %}", function(data) {
  // 向后端发送AJAX请求，获取新的验证码图像
  $('#captcha-image').attr('src', "{% url 'supervisor:generate_code' %}");
  });
}
</script>
{% endblock %}
